// 注意{Component} 是按需引入，不是解构
import React, { Component } from 'react'

import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'


export default class App extends Component {
  state = { todos: [{ id: '001', name: 'trkj', done: true }, { id: '002', name: 'hz', done: false }] }

  addTodo = (todo) => {
    const todos = this.state.todos
    const newTodos = [todo, ...todos]
    this.setState({ todos: newTodos })
  }

  updateTodo = (id, done, e) => {
    const { todos } = this.state
    let idx = todos.findIndex(item => item.id === id)
    todos[idx].done = done
    this.setState({ todos: todos })

    console.log(e)
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} />
          <Footer />
        </div>
      </div>
    )
  }
}